<template>
	<view class="index">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#39B19D',
			}"></view>
		<view class="img_box">
			<swiper v-if="isArray" :circular="true" style="height: 1000rpx" @change="changeImage" circular
				:indicator-dots="false" :autoplay="autoplay" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="">
						<view class="" v-if="item.type === 'image'">
							<image style="width: 100%; height: 1000rpx" mode="aspectFill" :src="item.url"></image>
						</view>
						<view class="" v-if="item.type === 'video'">
							<video @loadedmetadata="onVideoLoaded(index)" :id="'video-' + index" ref="video"
								style="width: 100%; height: 1000rpx" initial-time="0" :muted='true'
								:autoplay='videoPlay' @ended="onended" :src="item.url"></video>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<image v-else style="width: 100%; height: 1000rpx" mode="aspectFill" :src="src">
			</image>

		</view>
		<view class="btn_box">
			<!-- <view class="btn">點擊開桌</view> -->
			<u-button class="custom-style1" @click="toMemu" text="點擊開桌"></u-button>
		</view>
		<view class="feature">
			<store-login @handClose="handClose" @closeFn="closeFn" :showClose="showClose" v-if="isStoreLogin">
			</store-login>
		</view>
		<!-- <view class="resetting">
			<u-button class="custom-style" @click="openStoreLogin" text="重新輸入設備ID"></u-button>
		</view> -->

		<!-- <u-button class="custom-style1" @click="toScan" text="跳轉掃描"></u-button> -->

		<u-modal :show="isCoinInsufficient" @confirm="isCoinInsufficient=false" title="當前機器找零不足,請通知管理人員處理"
			confirmText="知道了!"></u-modal>

	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import StoreLogin from '@/components/StoreLogin/StoreLogin.vue';
	import {
		getEquipmentStoreByEqID
	} from '@/api/index.js'
	import {
		LogCat
	} from '@/utils/logCat';

	import {
		timeOut
	} from '@/utils/timeoutToIndex.js'

	import {
		cacheChangeStatus
	} from '@/api/order.js'

	// const zlSerialPort = uni.requireNativePlugin('Fvv-UniSerialPort3');

	export default {
		components: {
			StoreLogin
		},
		data() {
			return {
				src: '',
				baseURL,
				isStoreLogin: false, // 是否弹出店铺登录窗口
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				showClose: false,
				isCoinInsufficient: false,
				autoplay: true,
				videoPlay: true,
				current: 0,
				isArray: true,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;

			this.isStoreLoginFn();
			// this.setSwiperImg();
			this.getStoreInfoByEqID()

			const {
				order
			} = useStore()
			order.setExtendFlag(false)

			// #ifdef APP-PLUS
			timeOut()
			// #endif
		},
		onShow() {
			// this.isCoinInsufficient = uni.getStorageSync('CoinInsufficient') ? uni.getStorageSync('CoinInsufficient') :
			// 	false
			this.cacheChangeStatusFn()
			this.setSwiperImg();
		},
		methods: {
			toScan() {
				uni.navigateTo({
					url: '/pages/scanTest/scanTest'
				})
			},
			countdown() {
				const {
					times
				} = useStore();
				const currentTime = Date.now();

				times.setLastTimesState(currentTime);
			},
			handClose() {
				this.isStoreLogin = false;
				this.setSwiperImg();
			},
			setSwiperImg() {
				if (uni.getStorageSync('equipmentOptions')) {
					const equipmentOptions = JSON.parse(
						uni.getStorageSync('equipmentOptions')
					);
					if (equipmentOptions.image1 && equipmentOptions.image1.length) {
						this.src = baseURL + equipmentOptions.image1[1].url
					}
					const list = equipmentOptions.image1 ? equipmentOptions.image1 : []
					this.isArray = Array.isArray(list)
					if (list.length && Array.isArray(list)) {
						this.list = list.map(item => {
							return {
								url: baseURL + item.url,
								type: item.type
							}
						})
						if (this.list[0].type === 'video') {
							this.autoplay = false
						}
					} else {
						this.src = baseURL + list
					}
				}

			},
			isStoreLoginFn() {
				// const equipmentOptions = JSON.parse(
				// 	uni.getStorageSync('equipmentOptions')
				// );
				this.isStoreLogin =
					uni.getStorageSync('equipmentOptions') &&
					JSON.parse(uni.getStorageSync('equipmentOptions')) &&
					Object.keys(JSON.parse(uni.getStorageSync('equipmentOptions'))).length >
					0 ?
					false :
					true;
			},
			toMemu() {
				this.countdown();
				uni.navigateTo({
					url: '/pages/menu/menu'
				});
			},
			openStoreLogin() {
				this.showClose = true
				this.isStoreLogin = true
			},
			closeFn() {
				this.showClose = false
				this.isStoreLogin = false
			},
			getStoreInfoByEqID() {
				const equipmentOptions = uni.getStorageSync('equipmentOptions') ? JSON.parse(uni.getStorageSync(
					'equipmentOptions')) : null
				// console.log(equipmentOptions, '查看')
				if (!equipmentOptions) {

					uni.request({
						url: baseURL + '/api/index/getEquipmentStore',
						data: {
							equipmentID: equipmentOptions.equipmentID
						},
						header: {
							Accept: 'application/json',
							'Content-Type': 'application/json',
							'X-Requested-With': 'XMLHttpRequest',
						},
						method: 'POST',
						sslVerify: false,
						success: (res) => {
							// console.log(res.data.data,'店鋪')
							const resOptions = res;
							uni.request({
								url: baseURL + '/api/index/getstoreDetails',
								data: {
									store_id: res.data.data.store_id
								},
								header: {
									Accept: 'application/json',
									'Content-Type': 'application/json',
									'X-Requested-With': 'XMLHttpRequest',
								},
								method: 'GET',
								sslVerify: false,
								success: (res) => {
									if (res.data.code == 0) {
										uni.showToast({
											title: '設備ID有誤',
											icon: 'error'
										})
										return
									}

									uni.setStorageSync(
										'equipmentOptions',
										JSON.stringify({
											...resOptions,
											...res.data.data,
											equipmentID: equipmentOptions.equipmentID
										})
									);

									this.setSwiperImg();
								}
							})

						}
					})
				}
			},
			changeImage(e) {
				const index = e.detail.current
				const info = this.list[index]
				this.current = e.detail.current; // 更新当前索引  
				this.playCurrentVideo(); // 尝试播放当前视频  
				if (info.type === 'video') {
					this.autoplay = false

				} else {
					this.autoplay = true
				}
			},
			onended() {
				console.log('播放完了')
				this.autoplay = true
			},
			onVideoLoaded(index) {
				if (index === this.current) {
					this.playCurrentVideo(); // 如果视频加载完成且是当前项，则播放  
				}
			},
			playCurrentVideo() {
				const videoIndex = this.current;
				const videoContext = uni.createVideoContext('video-' + videoIndex);
				if (videoContext && this.list[videoIndex].type === 'video') {
					videoContext.play(); // 播放当前视频  
				}
			},
			cacheChangeStatusFn() {
				const equipmentOptions = uni.getStorageSync('equipmentOptions') ? JSON.parse(uni.getStorageSync(
					'equipmentOptions')) : null;
				if (equipmentOptions) {
					const params = {
						type: 1, // 1--查询状态   2--存入状态
						equipmentID: equipmentOptions.equipmentID
					}

					uni.request({
						url: baseURL + '/api/index/cacheChangeStatus',
						method: 'POST',
						data: params,
						success: (res) => {
							this.isCoinInsufficient = res.data.data ? false : true
						}
					})
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		// background-color: $uni-color-green-light;
		background-color: #39B19D;

		.img_box {
			padding: 40rpx 40rpx 0;
		}

		.btn_box {
			padding: 35rpx 0;

			.btn {
				// width: 300rpx;
				text-align: center;
				font-size: 50rpx;
				color: $uni-color-white;
			}

			.custom-style,
			.custom-style1 {
				// margin: 30rpx;
				width: 400rpx;


			}

			.custom-style1 {
				::v-deep .u-button__text {
					font-size: 36rpx !important
				}
			}
		}

		.resetting {
			width: 250rpx;
			position: fixed;
			bottom: 30rpx;
			// left: 0%;
			right: 0%;
			margin: 0 auto;

			.custom-style {

				// margin: 30rpx;
				// width: 400rpx;
				::v-deep .u-button__text {
					font-size: 22rpx !important
				}
			}
		}
	}
</style>